<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            width: 100px;
        }
        ul>li{
            border-bottom: dashed 1px #ccc;
            padding: 10px 5px;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
        <li>头七</li>
    </ul>
    <button id="btn">隐藏</button>
    <script>
        // $("li:eq(2)").css("font-size","30px");
        // $("li:first,li:last").css("color","red");
        $("li:odd").css("background-color","red");
        // $("li:not(li:eq(2))").css("color","#fff");
        // $("li:lt(2)").css("color","red");
        // $("li:gt(2)").css("background-color","#eee");
        $("#btn").on("click",function(){
            if($("#btn").text() == "隐藏"){
                //hide()隐藏 参数：毫秒
                $("ul").slideUp(500,function(){
                    $("#btn").text("显示");
                }); 
            }
            else{
                $("ul").slideDown(500,function(){
                    $("#btn").text("隐藏");
                })
            }
        })
    </script>
</body>
</html> 